<template>
  <el-main>
    <el-row type="flex" justify="space-between" align="middle">
      <el-col>
        <el-row type="flex" align="middle">
          <h1 style="display:inline-block;margin-right:30px">运动场馆</h1>
          <el-button size="mini"
            @click="selectCategory($event,index,item.cid)"
            :plain="!fieldCategoryList[index].onclick"
            :type="fieldCategoryList[index].onclick ? 'primary' :''"
            v-for="(item,index) in fieldCategoryList"
            :key="item.cid">{{item.label}}
          </el-button>
        </el-row>
      </el-col>
      <my-Search :searchWay="true" :inputNoOptionSpan="24" @onSearch="getSearchContent" :inputPlaceholder="'场馆名称'"></my-Search>
    </el-row>
    <el-row :gutter="30">
      <el-empty v-if="showFieldList.length==0" description="未找到符合条件的场馆" :image-size="500" :image="notFoundFieldPic"></el-empty>
      <el-col v-for="item in showFieldList" :key="item.id" :lg="8" :md="24" :xs="24" >
        <div class="fieldCard" @click="toFieldInfo(item.id,item.name,item.status)">
          <el-row>
            <div class="fieldCover" :style=" 'background-image:url('+item.url+');' "></div>
          </el-row>
          <el-row class="fieldRemark">
            <el-row type="flex" justify="space-between" align="middle">
              <el-col>
                <span class="fieldTitle">{{item.name}}</span>
              </el-col>
              <el-col style="text-align:right;">
                <el-tag :type="item.status==1 ? 'success':'info'" size="medium" effect="plain">{{item.status==1?'正常开放':'维护中'}}</el-tag>
                <el-tag :type="item.cid | chooseTagsColor" style="color:#fff;" size="medium" effect="dark">{{item.label==null? '综合运动':item.label}}</el-tag>
              </el-col>
            </el-row>
            <el-row>
              <i class="el-icon-location"/>位置：<span>{{item.locate}}</span>
            </el-row>
            <el-row>
              <i class="el-icon-user-solid" />负责人：<span>{{item.username ? item.username : '正在招募'}}</span>
            </el-row>
            <el-row>
              <i class="el-icon-phone" />联系电话：<span>{{item.phone ? item.phone : '-' }}</span>
            </el-row>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import { getValidFieldListApi } from "@/api/field";
import mySearch from "@/components/MySearch/index";
import notFoundFieldPic from "@/assets/other_images/NotFoundField.png";
import 'element-ui/lib/theme-chalk/display.css';
  export default {
    components: { mySearch },
    data(){
      return{
        //所有符合条件的父级场馆
        fieldParentList: [],
        //展示到页面的场馆
        showFieldList:[],
        //场馆类别
        fieldCategoryList: [],
        //搜索框
        searchFieldName: "",
        //类别筛选
        selectCategoryList: [],
        //未找到场馆图片
        notFoundFieldPic,
      };
    },
    created(){
      this.getValidParentFieldList();
    },
    methods:{
      toFieldInfo(id,name,flag){
        if(flag==2){
          this.$message.info('场馆维护中');
        }else if(flag==1){
          this.$router.push(`/field/fieldbook/${id}/${name}`);
        }
      },
      //实现搜索筛选
      setShowFieldList(){
        if(this.searchFieldName==""&&this.selectCategoryList.length==0){
          this.showFieldList = this.fieldParentList;
        }else if(this.searchFieldName!=""&&this.selectCategoryList.length==0){
          this.showFieldList = this.fieldParentList.filter(item=>{
            return item.name.includes(this.searchFieldName);
          });
        }else if(this.searchFieldName==""&&this.selectCategoryList.length>0){
          this.showFieldList = this.fieldParentList.filter(item=>{
            return this.selectCategoryList.includes(item.cid);
          });
        }else if(this.searchFieldName!=""&&this.selectCategoryList.length>0){
          this.showFieldList = this.showFieldList.filter(item=>{
            return (item.name.includes(this.searchFieldName)&&this.selectCategoryList.includes(item.cid))
          })
        }
      },
      //筛选
      selectCategory(e,i,c){
        this.fieldCategoryList[i].onclick = !this.fieldCategoryList[i].onclick
        if(this.fieldCategoryList[i].onclick){
          this.selectCategoryList.push(c);
        }else{
          this.selectCategoryList = this.selectCategoryList.filter(item => item != c);
          //强制失焦
          let target = e.target
          if (target.nodeName === 'SPAN') {
            target = e.target.parentNode
          }
          target.blur()
        }
      },
      //搜索场馆
      getSearchContent(val){
        this.searchFieldName = val;
      },
      async getValidParentFieldList(){
        let res = await getValidFieldListApi({pid:0});
        if(res&&res.code==200){
          this.fieldParentList = res.data;
          //获取类别按钮
          let n = 0;
          this.fieldParentList.forEach(item=>{
            if(item.cid==null&&n==0){
              this.fieldCategoryList.unshift({label:'综合',cid:item.cid,onclick:false});
              n++;
            }else if(item.cid!=null){
              this.fieldCategoryList.push({label:item.label,cid:item.cid,onclick:false})
            }
          })
          //初始化展示场馆的数据
          this.showFieldList = this.fieldParentList;
        }
      }
    },
    watch: {
      searchFieldName() {
        this.setShowFieldList();
      },
      selectCategoryList(){
        this.setShowFieldList();
      }
    },
    filters: {
      chooseTagsColor(value){
        switch(value%3){
            case 0:
                return ''
            break;
            case 1:
                return 'success'
            break;
            case 2:
                return 'danger'
            break;
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  .fieldCard{
    height: 300px;
    margin:30px 20px;
    cursor: pointer;
    box-shadow: 1px 3px 9px #ccc;
    transition: 0.3s;
    border-radius:10px;
    overflow: hidden;

    .fieldRemark{
      padding: 10px 20px 0px 20px;
      font-size: 16px;
      color:#a7a7a7;
      .fieldTitle{
        color:#636363;
        font-size: 30px;
        font-weight: bold;
        transition: 0.3s;
      }
      .el-row{
        margin-bottom: 8px;
        .el-tag{
          margin-left: 10px;
        }
        i + span{
          color:#636363;
        }
        i{
          margin-right: 2px;
        }
      }
    }

    &:hover{
      box-shadow: 3px 2px 18px #ccc;
      transition: 0.3s;
    }

    &:hover .fieldCover{
      height: 170px;
      transition: 0.3s;
    }

    .fieldCover{
      height: 222px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:cover;
      transition: 0.3s;
    }
  }

</style>
